<template>
  <div class="home">
    <News :newsList='newsList' :rNerList="rNerList"></News>
    <Pagination :page="page" @changePage="changePage"></Pagination>
  </div>
</template>

<script>
import { defineComponent ,computed, reactive, toRefs,onMounted  } from 'vue';
import Pagination from '@/components/pagination/index.vue'
import News from "@/components/news/news.vue";
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  components: {
    News,
    Pagination
  },
  setup() {
    const store = useStore() ;
    const isLogin = computed(() => store.state.isLogin)
    const data = reactive({
      page: {
        pageSize: 10,
        total: 100
      },
      form: {
        pageSize: 5,
        page: 1,
        house_title: "",
      },
      newsList: [],
      rNerList: []
    })
    
    const handlerLogin = (bol,type) => {
      store.commit('handlerLogin',bol,type)
    }

    const changePage = (num) => {
      data.form.page = num
      getList(num)
    }
    
    const getList = (num) => {
        store.dispatch("home/newsList", {tag: 2,limit: 5,page: num}).then((res) => {
        data.newsList = res.data;
        data.rNerList = res.data.slice(2,8);
        data.page.total = res.total
      });
    } 
    onMounted(() => {
      getList(1)
    });
    return {
      ...toRefs(data),
      handlerLogin,
      changePage,
      isLogin
    }
  }
});
</script>
